import React, {Component} from 'react';
import {Cascader, Select, Option, Input, Checkbox, InputNumber, Button, Form} from 'antd';
import {reqCity, reqSkill, reqPosition, reqTrade, reqAddCompanyRecruit, reqCompanyInformation} from "../../api";
import './recruit_information_add.less';

/*
* 添加招聘信息路由*/
class RecruitInformationAdd extends React.Component {

    state = {
        provinceoptions: [],
        type: '1',//当前需要显示的省列表的type=1，父级
        skilloptions: [],
        positionoptions: [],
        tradeoptions: [],
        companyInformation: []
    };

    /*
    * 初始化所有列的数组*/
    //初始化省市

    initProvinceOptions = (province) => {
        //根据province生成provinceoptions数组
        const provinceoptions = province.map(item => ({
            value: item.cityname,
            label: item.cityname,
            isLeaf: false,
            children: item.city.map(city => ({
                value: city.cityname,
                label: city.cityname,
                id: city.id,
                isLeaf: false,
            }))
        }))
        //更新options的状态
        this.setState({
            provinceoptions
        })
    };

    initSkillOptions = (skill) => {
        //根据skill生成skilloptions数组
        const skilloptions = skill.map(item => ({
            value: item.name,
            label: item.name,
            id: item.id,
            isLeaf: false,
        }))

        //更新options的状态
        this.setState({
            skilloptions
        })
    };

    initPositionOptions = (position) => {
        //根据skill生成skilloptions数组
        const positionoptions = position.map(item => ({
            value: item.name,
            label: item.name,
            id: item.id,
            isLeaf: false,
        }))
        //更新options的状态
        this.setState({
            positionoptions
        })
    };

    initTradeOptions = (trade) => {
        //根据skill生成skilloptions数组
        const tradeoptions = trade.map(item => ({
            value: item.name,
            label: item.name,
            id: item.id,
            isLeaf: false,
        }))
        //更新options的状态
        this.setState({
            tradeoptions
        })
    };

    //异步获取省市的列表信息
    getProvince = async (type) => {
        //发异步ajax请求，获取数据
        const result = await reqCity('1')
        const province = result.data.results
        this.initProvinceOptions(province)
        console.log(province)
    };
    //异步获取技能要求的列表信息
    getSkill = async () => {
        //发异步ajax请求，获取数据
        const result = await reqSkill()
        const skill = result.data.results
        this.initSkillOptions(skill)
    };
    //异步获取岗位的列表信息
    getPosition = async () => {
        //发异步ajax请求，获取数据
        const result = await reqPosition()
        const position = result.data.results
        this.initPositionOptions(position)
    };
    //异步获取行业的列表信息
    getTrade = async () => {
        //发异步ajax请求，获取数据
        const result = await reqTrade()
        const trade = result.data.results
        this.initTradeOptions(trade)
    };
    //异步获取公司列表信息
    getCompanyInformation = async () => {
        //发异步ajax请求，获取数据
        const result = await reqCompanyInformation()
        const companyInformation = result.data.results
        //更新状态
        this.setState({
            companyInformation
        })
    };
    /*
    * 为第一次render()准备数据*/
    // componentWillMount() {
    //     this.initOptions()
    // }

    /*
    * 执行异步任务：发异步ajax请求*/
    componentDidMount() {
        this.getProvince()
        this.getSkill()
        this.getPosition()
        this.getTrade()
        this.getCompanyInformation()
    }

    submit = () => {
        //进行表单验证，如果通过了，才发送请求
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                //1、搜集数据
                const {a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15} = values
                const requirestyle = a1.toString()
                const city = a2.toString()
                const detailed_address = a3.toString()
                const contact = a4.toString()
                const contact_phone = a5.toString()
                const position = a6.toString()
                const trade = a7
                const requirement = a8
                const simple_desc = a9.toString()
                const describe = a10.toString()
                const number = a11.toString()
                const salary_type = a12.toString()
                const reward = a13.toString()
                const pay_day = a14.toString()
                const state = a15.toString()
                const addRecruitInformation = {
                    requirestyle,
                    city,
                    detailed_address,
                    contact,
                    contact_phone,
                    position,
                    trade,
                    requirement,
                    simple_desc,
                    describe,
                    number,
                    salary_type,
                    reward,
                    pay_day,
                    state
                }
                console.log(a8)
                console.log(addRecruitInformation)
                //2、调用接口请求函数去添加/更新
                const result = await reqAddCompanyRecruit(addRecruitInformation)
                //跳转到充值界面
                this.props.history.push('/recruit/recruit_information')
                //3、根据结果提示
            } else {
                console.log('发送ajax请求失败 ');
            }
        });

    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };

    onChangeCity = (value, selectedOptions) => {
        console.log(value)
        const city=value.map(i=>{
            return i[1]
        })
        console.log(city)
    }

    render() {
        //读取状态数据
        const provinceoptions = this.state.provinceoptions
        const skilloptions = this.state.skilloptions
        const positionoptions = this.state.positionoptions
        const tradeoptions = this.state.tradeoptions
        const companyInformations = this.state.companyInformation
        const address = companyInformations.map(i => {
            return i.address
        })
        const contact = companyInformations.map(i => {
            return i.contact
        })
        const contact_phone = companyInformations.map(i => {
            return i.contact_phone
        })
        //招聘方式选择
        const {Option} = Select;
        const {TextArea} = Input;
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="recruit">
                <div><h1>新增招聘信息</h1></div>
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <div className="recruit-style">
                        <div>
                            <Form.Item label="招聘方式">
                                {getFieldDecorator('a1', {initialValue: "4"})(<Select
                                    className="recruit-style-select"
                                    showSearch
                                    style={{width: 200}}
                                    placeholder="请选择招聘方式"
                                    optionFilterProp="children"
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                >
                                    <Option value="1">直招</Option>
                                    <Option value="2">承包</Option>
                                    <Option value="3">临时工</Option>
                                    <Option value="4">劳务派遣</Option>
                                    <Option value="5">学徒</Option>
                                    <Option value="6">培训</Option>
                                </Select>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="城市">
                                {getFieldDecorator('a2', {})(<Cascader className="recruit-style-cascader"
                                                                       onChange={this.onChangeCity}
                                                                       options={provinceoptions} placeholder="请选择城市"/>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="详细地址">
                                {getFieldDecorator('a3', {initialValue: address})(<Input className="recruit-style-input"
                                                                                         placeholder="填写工人详细工作地址"/>)}
                            </Form.Item>

                        </div>
                        <div>
                            <Form.Item label="联系人">{getFieldDecorator('a4', {initialValue: contact})(<Input
                                className="recruit-style-input1" placeholder="填写工人跟谁联系"/>)}</Form.Item>
                        </div>
                        <div>
                            <Form.Item label="联系方式">{getFieldDecorator('a5', {initialValue: contact_phone})(<Input
                                className="recruit-style-input2" placeholder="联系方式"/>)}</Form.Item>
                        </div>
                        <div>
                            <Form.Item label="岗位">
                                {getFieldDecorator('a6', {initialValue: 9})(<Select
                                    className="recruit-style-select1"
                                    showSearch
                                    style={{width: 200}}
                                    placeholder="请选择岗位"
                                    optionFilterProp="children"
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                >
                                    {positionoptions.map(i => (<Option value={i.id}>{i.label}</Option>))}
                                </Select>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="行业">
                                {getFieldDecorator('a7', {initialValue: 7})(<Select
                                    className="recruit-style-select2"
                                    showSearch
                                    style={{width: 200}}
                                    placeholder="请选择行业"
                                    optionFilterProp="children"
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                >
                                    {tradeoptions.map(i => (<Option value={i.id}>{i.label}</Option>))}
                                </Select>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="技术要求">
                                {getFieldDecorator('a8', {initialValue: [7, 11]})(<Checkbox.Group
                                    className="recruit-style-checkbox" options={skilloptions}/>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="招聘简章">
                                {getFieldDecorator('a9', {initialValue: "我母鸡啊"})(<TextArea rows={4} cols={100}/>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="岗位介绍">
                                {getFieldDecorator('a10', {initialValue: "你也母鸡啊"})(<TextArea rows={6} cols={100}/>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="招聘人数">
                                {getFieldDecorator('a11', {initialValue: 11})(<InputNumber
                                    className="recruit-style-inputnumber" min={1} max={100}/>)}
                            </Form.Item>
                        </div>
                        <div><Form.Item label="薪资发放">
                            {getFieldDecorator('a12', {initialValue: "3"})(<Select
                                className="recruit-style-select3"
                                showSearch
                                style={{width: 200}}
                                placeholder="请选择薪资发放形式"
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                <Option value="1">当月发放</Option>
                                <Option value="2">次月发放</Option>
                                <Option value="3">人走账清</Option>
                                <Option value="4">一定周期</Option>
                                <Option value="5">年底结清</Option>
                                <Option value="6">其他</Option>
                            </Select>)}
                        </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="悬赏金">
                                {getFieldDecorator('a13', {initialValue: 666})(<InputNumber
                                    className="recruit-style-inputnumber1"/>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="保质期">
                                {getFieldDecorator('a14', {initialValue: 10})(<InputNumber
                                    className="recruit-style-inputnumber2"/>)}
                            </Form.Item>
                        </div>
                        <div>
                            <Form.Item label="岗位状态">
                                {getFieldDecorator('a15', {initialValue: "draft"})(<Select
                                    className="recruit-style-select"
                                    showSearch
                                    style={{width: 200}}
                                    placeholder="请选择岗位状态"
                                    optionFilterProp="children"
                                    filterOption={(input, option) =>
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                >
                                    <Option value="draft">待审核</Option>
                                    <Option value="offline">下线</Option>
                                    <Option value="online">上线</Option>
                                </Select>)}
                            </Form.Item>
                        </div>
                    </div>
                </Form>
                <Button type="primary" htmlType="submit" onClick={this.submit}>
                    提交招聘信息
                </Button>
            </div>
        )
    }
}

const WrappedRecruitInformationAdd = Form.create()(RecruitInformationAdd);
export default WrappedRecruitInformationAdd;